body {
    #app {
        blockquote {
            font-size: 1rem;
            color: #999;
            border-left: 0.5rem solid #dfe2e5;
            margin: 1rem 0;
            padding: 0.25rem 0 0.25rem 1rem;
        }
        // adjust the icon size of the code-copy plugin
        .code-copy {
            position: absolute;
            right: 0;
            bottom: 0;
            svg {
                width: 16px;
                height: 16px;
            }
        }
        // add tree styles for ul li
        $treeBorderColor = #cccccc;
        .sidebar {
            .sidebar-sub-headers {
                padding-left: 1rem !important;
                li {
                    list-style: none;
                    position: relative;
                    a.sidebar-link {
                        padding-left: 1.8rem;
                    }
                }
                li:before {
                    position: absolute;
                    content: '';
                    top: 0em;
                    left: 0.8em;
                    width: 0.8em;
                    height: 1em;
                    border-style: none none dashed dashed;
                    border-width: 0.05em;
                    border-color: $treeBorderColor;
                }
                li:not(:last-child):after {
                    position: absolute;
                    content: '';
                    top: 0.7em;
                    left: 0.8em;
                    bottom: 0;
                    border-style: none none none dashed;
                    border-width: 0.05em;
                    border-color: $treeBorderColor;
                }
            }
        }
        // make table show 100%
        table {
            display: table;
            width: 100%;
        }
        blockquote {
            background-color: #ebfffe;
            padding: 0.8rem 1.5rem;
            border-left: 0.5rem solid;
            border-color: #026863;
            color: #2c3e50;
        }
        // overwrite element ui
        .el-drawer {
            .el-drawer__header {
                font-size: 1.5rem;
                padding-bottom: 0.3rem;
                border-bottom: 1px solid #eaecef;
                color: #2c3e50;
                margin-bottom: 5px;
                padding: 5px 10px 5px;
            }
            .el-drawer__body {
                padding: 0 15px;
            }
        }
        // change H1 tag text-align
        h1 {
            text-align: center;
        }
        @media screen and (min-width: 1600px) {
            .home, .page .theme-default-content, .page-edit, .page-nav {
                max-width: 1200px;
            }
        }
        @media screen and (max-width: 1440px) {
            .home, .page .theme-default-content, .page-edit, .page-nav {
                max-width: 90%;
            }
        }
        // custom container styles
        .custom-block.motto {
            background-color: #ebfffe;
            border-color: #026863;
            color: #2c3e50;
            padding: 0.1rem 1.5rem;
            border-left-width: 0.5rem;
            border-left-style: solid;
            margin: 1rem 0;
        }
        .custom-block.info {
            background-color: #f6f3f7;
            border-color: #6808d6;
            color: #2a087a;
            padding: 0.1rem 1.5rem;
            border-left-width: 0.5rem;
            border-left-style: solid;
            margin: 1rem 0;
        }
        .custom-block.right {
            color: transparentify($textColor, 0.4);
            font-size: 0.9rem;
            text-align: right;
        }
    }
}